<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
    :visibleContent2="false"
  >
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :model="form"
        :rules="rules"
        label-width="90px"
        label-position="right"
        :disabled="status == 'show'"
      >
        <el-row class=''>
          <el-col :span="12">门店信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="门店名称:" prop="storeName">
            <el-input
              v-model="form.storeName"
              clearable
              maxlength="30"
              placeholder="门店名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属城市:" prop="cityCode">
            <CitySelect v-model="form.cityCode" placeholder="所属城市" />
          </el-form-item>

          <el-form-item label="营业状态:" prop="status">
            <el-select clearable ref="dragSelect" v-model="form.status">
              <el-option
                v-for="item in dict['门店状态']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="道路救援:" prop="rescue">
            <el-select clearable ref="dragSelect" v-model="form.rescue">
              <el-option
                v-for="item in dict['道路救援']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="门店电话:" prop="storePhone">
            <el-input
              v-model="form.storePhone"
              clearable
              maxlength="30"
              placeholder="门店电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属区县:" prop="countyCode">
            <District
              v-model="form.countyCode"
              :cityCode="form.cityCode"
              placeholder="所属区县"
            />
          </el-form-item>
          <el-form-item label="总面积:" prop="area">
            <el-input
              v-model="form.area"
              clearable
              maxlength="11"
              placeholder="总面积"
              style="width: 200px"
              ><template slot="append">㎡</template></el-input
            >
          </el-form-item>
          <el-form-item label="救援电话:" prop="rescuePhone">
            <el-input
              v-model="form.rescuePhone"
              clearable
              placeholder="救援电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="主营品牌:" prop="noteCarBrandIds">
            <CarBrand v-model="form.noteCarBrandIds" />
            <!-- @input="getManufacturer()"  -->
          </el-form-item>
          <el-form-item label="厂商:" prop="manufacturer">
            <el-input
              v-model="form.manufacturer"
              clearable
              maxlength="200"
              placeholder="厂商"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="门店地址:" prop="address">
            <el-input
              v-model="form.address"
              clearable
              maxlength="200"
              placeholder="门店地址"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="店长姓名:">
            <el-input
              v-model="form.managerName"
              clearable
              maxlength="200"
              @focus="employeeFocus"
              placeholder="店长姓名"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="门店层级:" prop="storeLevel">
            <el-select clearable ref="dragSelect" v-model="form.storeLevel">
              <el-option
                v-for="item in dict['门店等级']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="在职人数:" prop="activeStaff">
            <el-input
              v-model.number="form.activeStaff"
              clearable
              maxlength="200"
              readonly
              placeholder="在职人数"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="上级门店:" prop="pid">
            <el-select clearable ref="dragSelect" v-model="form.pid" :disabled="status">
              <el-option
                v-for="item in pidDict"
                :key="item.id"
                :value="item.id"
                :label="item.storeName"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="店长电话:">
            <el-input
              v-model="form.managerPhone"
              clearable
              maxlength="11"
              placeholder="店长电话"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="营业时间:" prop="businessHours">
            <el-time-picker
              is-range
              arrow-control
              value-format="HH:mm:ss"
              v-model="form.businessHours"
              range-separator="-"
              start-placeholder="上班时间"
              end-placeholder="下班时间"
              placeholder="选择时间范围"
              style="width: 200px"
              @change="businessHoursChange"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="门店类型:" prop="sh" v-if="userInfo.account == 'admin'">
            <el-select clearable ref="dragSelect" v-model="form.sh">
              <el-option
                v-for="item in dict['门店类型']"
                :key="item.index"
                :value="item.value"
                :label="item.text"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="主营业务:" prop="note">
            <el-input
              style="min-width: 500px"
              type="textarea"
              :rows="4"
              v-model="form.note"
              clearable
              maxlength="200"
              placeholder="主营业务"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-row>
        <el-col :span="12">门店照片</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row v-if="status != 'show'">
        <el-upload
          action=''
          list-type="picture-card"
          :http-request="httpRequest"
          :fileList="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-row>
      <el-row type="flex" justify="center" v-if="status != 'show'">
        <el-button @click="save">保存</el-button>
      </el-row>
    </template>
    <!-- <template #contentPanel2>
      <data-table
      ref="roleTable"
      :value="testTable"
      :has-action="true"
      :table-column-attributes="[{name:'测试1',value:'test1',teype:'text'},
      {name:'测试2',value:'test2',teype:'text'},{name:'测试3',value:'test3',teype:'text'},]"
      :width="160"
      :isShowPage="true"
      :isShowSelection="true"
      :hasAction="false"
      :totalCount="testTable.length"
      :localPage="true"
    ></data-table>
    </template> -->
    <template #dialog>
      <EmployeeTable
        @roleIdListSelectCheck="employeListSelectCheck"
        :checkList="[form.managerId]"
      />
    </template>
  </base-layout>
</template>

<script>
import baseMixin from "@/mixins/base";
import { getDict, fileUpload, getImageUrl } from "@/utils/index";
import { getAllBrand, getManufacturer } from "@/api/after-sale/systemManage/carModel";
import { CarBrand } from "@/components/index";
import EmployeeTable from "./EmployeeTable";
import { filter } from "rxjs/operators";
import {
  addData,
  getLevelStore,
  details,
  updateData,
} from "@/api/after-sale/systemManage/store";
import { rules } from "../rules/index";
export default {
  components: {
    CarBrand,
    EmployeeTable,
  },
  mixins: [baseMixin({})],
  data() {
    return {
      userInfo: '',
      form: {
        address: '', // 门店地址
        manufacturer: '', // 厂商
        area: '', // 面积
        cityCode: '', // 城市id
        countyCode: '', //  县id
        endTime: '', // 结束时间
        id: '', //  id
        managerId: '', // 店长
        managerName: '', //  店长姓名
        managerPhone: '', // 店长手机
        sh: '', // 店长手机
        note: '', // 主营业务
        noteCarBrandIds: '', // 	品牌id’,’分割
        photos: [], // 	照片 上传时用,分割
        pid: '', // 上级门店id
        rescue: '', // 	是否支持道路救援
        rescuePhone: '', // 	救援电话
        startTime: '', // 	开始时间
        status: '', // 	经营状态
        storeLevel: '', // 门店等级	0门店 1区域 2品牌 3集团 4平台
        storeName: '', // 	门店名称
        storePhone: '', // 	门店电话
        activeStaff: 0, // 在职人数
        businessHours: '', // 营业时间
      },
      rules: rules,
      dict: [],
      fileList: [],
      pidDict: [], // 上级门店
      status: false, // 表单状态，默认新增
      // testTable:[],//测试表单本地分页
    };
  },
  watch: {
    "form.storeLevel": function (newValue, oldValue) {
      this.pidDict = [];
      // this.form.pid = ''
      getLevelStore(newValue).then((res) => {
        let { success, data } = res;
        if (success) this.pidDict = data;
      });
    },
  },
  async created() {
    this.dict = getDict(['门店状态', '道路救援', '门店等级', '门店类型'])
    this.userInfo = JSON.parse(sessionStorage.getItem("login"))
  },
  mounted() {
    let { id, status } = this.$route.query;
    if (id) {
      this.status = true;
      this.form.id = id;
      details(id).then((res) => {
        let { success, data } = res;
        if (success) {
          this.form = {
            ...data,
            noteCarBrandIds: data.noteCarBrandIds ? data.noteCarBrandIds.split(",") : '',
            photos: data.photos ? data.photos.split(",") : '',
            businessHours: [data.startTime, data.endTime],
          };
          this.form.photos.forEach((item, index) => {
            this.fileList.push({
              name: index,
              url: getImageUrl(item),
            });
          });
        }
      });
    }
    this.status = status;
  },
  methods: {
    async getManufacturer() {
      const { access } = await getManufacturer(this.form.noteCarBrandIds)
    },
    //上班、下班时间选择
    businessHoursChange(value) {
      this.form.startTime = value[0];
      this.form.endTime = value[1];
    },
    //打开员工选择列表
    employeeFocus() {
      this.handleDataInsert("员工列表");
    },
    //员工选择
    employeListSelectCheck(select) {
      this.form.managerId = select[0].id;
      this.form.managerPhone = select[0].phone;
      this.form.managerName = select[0].userName;
      this.dialogClose();
    },
    //覆盖文件默认上传行为
    httpRequest(value) {
      console.log("上传行文", value);
      fileUpload(value.file).then((res) => {
        let { success, data } = res;
        if (success) this.form.photos.push(data.id);
      });
    },
    //保存
    async save() {
      console.log(this.form.photos);
      let _success = false;
      this.$refs["fromdata"].validate((valid) => {
        if (valid) {
          _success = true;
        }
      });
      if (!_success) return;
      let _from = Object.assign({}, this.form);
      _from.noteCarBrandIds = _from.noteCarBrandIds.toString(",");
      _from.photos = _from.photos.toString(",");
      let { success } = _from.id ? await updateData(_from) : await addData(_from);
      if (_success) {
        this.$message.success("保存成功");
        this.closeRouter();
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
